<template>
	<view class="content u-page">
		<u-navbar leftText="首页" :fixed="true" title="赛事详情" :safeAreaInsetTop="true" bgColor="none" leftIconColor="#fff"
			@leftClick="leftClick">
			<view class="u-nav-slot" slot="left">
				<u-icon name="home" size="20" color="#fff"></u-icon>
			</view>
		</u-navbar>

		<view class="banner">
			<u-swiper :list="banner" indicator indicatorMode="line" circular bgColor="none" height="180"></u-swiper>
		</view>

		<view class="notice">
			<u-notice-bar :text="notice_lists" direction="column" bgColor='#fff' color='#00B5C3'></u-notice-bar>
		</view>

		<view class="weather" style="display: none1;">
			<p class="weather_tit">距离 2023年5月1日 还有</p>
			<view class="u-demo-block__content">
				<u-count-down :time="countDowns" format="DD:HH:mm:ss" autoStart @change="onChange">
					<view class="time">
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
							<text class="time__custom__tips">天</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
							<text class="time__custom__tips">时</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
							<text class="time__custom__tips">分</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
							<text class="time__custom__tips">秒</text>
						</view>
					</view>
				</u-count-down>
			</view>

			<view class="weather_info">
				<span>天气：晴</span>
				<span>当日温度：18~25</span>
				<span>风力：2~3级</span>
			</view>
		</view>

		<view class="link_wra">
			<view class="link">
				<ul>
					<li>
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="order"></u-icon>
						竞赛规则
					</li>
					<li>
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="file-text"></u-icon>
						报道须知
					</li>
					<li>
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="map"></u-icon>
						城市交通
					</li>
					<li>
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="bell"></u-icon>
						参赛手册
					</li>
					<li @tap="gotopage('sign_before')">
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="edit-pen"></u-icon>
						我要报名
					</li>
					<li>
						<u-icon :size="30" :customStyle="{margin:'auto'}" color="#fff" name="search"></u-icon>
						成绩查询
					</li>
				</ul>
			</view>
			<div class="clear"></div>
		</view>

		<view class="news">
			<h2>相关资讯</h2>
			<ul>
				<li>2023八百里瓯江（丽水）山水诗路桨板赛将于<span>2023-05-02</span></li>
				<li>2023八百里瓯江（丽水）山水诗路桨板赛将于<span>2023-05-02</span></li>
				<li>2023八百里瓯江（丽水）山水诗路桨板赛将于<span>2023-05-02</span></li>
			</ul>
		</view>

		<view class="parter">
			<img src="http://www.lsmarathon.org/s/f/image/2023/03/05/9/20230305094508367.jpg" mode="widthFix">
			<!-- <h2>冠名赞助商</h2>
			<img class="parter_img"
				src="https://2313452.s81i.faiusr.com/4/101/AFEI7JmNARAEGAAg6IPFhgYowK6nvwMwlAI42QFAZQ.png" alt="">
			<h2>顶级合作伙伴</h2>
			<img class="parter_img"
				src="https://2313452.s81i.faiusr.com/4/101/AFEI7JmNARAEGAAg6IPFhgYowK6nvwMwlAI42QFAZQ.png" alt="">
			<img class="parter_img"
				src="https://2313452.s81i.faiusr.com/4/101/AFEI7JmNARAEGAAg6IPFhgYowK6nvwMwlAI42QFAZQ.png" alt=""> -->
		</view>

		<tabbarLaw v-if="flag" :tabindex='0' :homeId="game_id"></tabbarLaw>
	</view>
</template>

<script>
	import * as homeApi from '@/api/home'
	import tabbarLaw from '@/components/uni-tabbar/tabbarLaw.vue';
	export default {
		components: {
			tabbarLaw
		},
		data() {
			return {
				banner: [
					'http://cdn.hzim.org/s/f/image/2023/03/08/15/20230308151251889.jpg',
				],
				notice_lists: [
					'全民健身迎亚运 奋斗实干奔共富 | 中广·万达广场',
					'成绩查询&成绩公示 |中广·万达广场2023丽水马拉松'
				],
				timeData: {},
				flag:false,//当数据获得之后再进行子组件的渲染
				game_id: '',
				startTime:'2023-06-17 20:30:00',
				countDowns:0
			}
		},
		onLoad(options) {
			this.game_id = options.game_id
			this.flag = true//当数据获得的之后再进行子组件的渲染
			this.initData();
		},
		methods: {
			initData() {
				var startTimeTrans = this.startTime.replace(/-/g,"/");
				var startTimeM = (new Date(startTimeTrans)).getTime();
				
				var timestampnow = Date.parse(new Date());
				var countDowns = (startTimeM-timestampnow);
				this.countDowns = countDowns
			},
			gotopage(pagename) {
				uni.navigateTo({
					url: '/pages/subpages/index/' + pagename + '?game_id=' + this.game_id
				})
			},
			leftClick() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			//倒计时
			onChange(e) {
				this.timeData = e
			},
		},
	}
</script>

<style lang="scss" scoped>
	.clear {
		clear: both;
	}

	.content {
		width: 100%;
		min-height: 1000px;
		background: #eee url('https://service.ayqqf.com/miniimages/bg.png') no-repeat;
		background-size: 100%;
		font-size: 12px;
		padding-top: 60px;
	}

	.banner {
		width: 96%;
		margin: 0 auto;
	}

	.popover_wra {
		height: 40px;
		margin-top: 10px;
	}

	.popover_btn {
		float: right;
		position: relative;
	}

	.title {
		font-size: 20px;
	}

	.tips {
		font-size: 12px;
		color: #999;
	}

	.tips span {
		float: right;
	}

	.introduction {
		margin-top: 20px;
	}

	.detail_info {
		line-height: 2;
		font-size: 14px;

		label {
			width: 100px;
			display: inline-block;
			color: #999;
		}
	}

	.notice {
		margin-top: 10px;
	}

	.weather {
		width: 92%;
		margin: 10px auto;
		padding: 2%;
		background-color: #00B5C3;
		color: #fff;
		border-radius: 5px;
		line-height: 2.5;
		font-size: 14px;
	}

	.weather_info span {
		margin-right: 20px;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			margin-top: 4px;
			width: 25%;
			height: 30px;
			background-color: #fff;
			border-radius: 4px;

			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			position: relative;

			&__item {
				color: #333;
				font-size: 16px;
				text-align: center;
			}

			&__tips {
				color: #67c7d0;
				font-size: 11px;
				position: absolute;
				bottom: -2px;
				right: 5px;
				color: #bbb;
			}
		}

		&__doc {
			color: #fff;
			padding: 0px 4px;
		}
	}

	.link {
		background-color: #fff;
	}

	.link li {
		float: left;
		width: 30.66%;
		margin: 10px 0 0 2%;
		padding: 10px 0;
		background-color: #5191d4;
		color: #fff;
		text-align: center;
		font-size: 14px;
	}

	.parter {
		text-align: center;
		background-color: #fff;
		margin-top: 10px;
		padding-top: 20px;

		h2 {
			font-size: 14px;
			background: url('https://service.ayqqf.com/miniimages/tit_bg.png') no-repeat;
			background-size: 60%;
			background-position: center;
			line-height: 40px;
		}
	}

	.parter_img {
		width: 138px;
		height: 109px;
	}

	.news {
		width: 96%;
		background-color: #fff;
		margin: 10px auto;

		ul {
			padding: 0 10px 10px 10px;
			line-height: 20px;
			color: #666;

			span {
				float: right;
			}
		}

		h2 {
			background: url('https://service.ayqqf.com/miniimages/tit_bg.png') no-repeat;
			background-size: 60%;
			background-position: center;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			margin-bottom: 20px;
		}
	}

	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
